import { useContext } from 'react';
import { Outlet } from '@umijs/max';
import classNames from 'classnames';

import { ErrorBoundary } from './components/ErrorBoundary';
import SecMenu from './components/SideMenu/CustomMenu/SecMenu';
import { MainLayoutContext } from '.';

const SecLayout = () => {
  const context = useContext(MainLayoutContext);
  const secMenuContentClasses = classNames('sec-menu-right-content', {
    'sec-menu-content-without-menu':
      !context.hasSecMenu || (!context.isOpen && context.hasSecMenu),
  });
  const containerCls = () => {
    return {};
    // return context.hasSecMenu
    //   ? 'sec-menu-and-page-contianer'
    //   : 'page-contianer-without-sec-menu';
  };

  return (
    <div className={containerCls()}>
      {false && (
        <div className="sec-menu-container">
          <SecMenu />
        </div>
      )}
      <div className={secMenuContentClasses}>
        <ErrorBoundary>
          <Outlet></Outlet>
        </ErrorBoundary>
      </div>
    </div>
  );
};

export default SecLayout;
